<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/font/iconfont.css">
    <style>
      .my-password{
        display: inline-block;
        font-size: 0px;
        position: relative;
        margin-top: 60px;
      }
        .my-password input {
            border: none;
            border-bottom: 2px solid #e3e3e3;
            outline: none;
            font-size: 16px;
            line-height: 24px;
            width: 300px;
            /* background-color: transparent; */
            letter-spacing: 4px;
        }

        .my-password .placeholder {
            font-size: 16px;
            line-height: 24px;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            color: #aaaaaa;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            user-select: none;
            /* z-index: -1; */
            /* 禁用标签的鼠标操作事件 */
            pointer-events: none;
            transition: all 300ms ease;
        }

        .my-password .placeholder .iconfont {
            font-size: 14px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0;
            transition: all 300ms ease;
        }

        .my-password .placeholder.active {
            transform: translate(0, -100%);
            font-size: 14px;
        }

        .my-password .placeholder.active .info {
            color: #5aa9df;
            font-weight: bold;
        }

        .my-password .placeholder.active .iconfont {
            opacity: 1;
        }

        .my-password .line {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 0%;
            font-size: 0px;
            height: 0px;
            margin: 0px;
            padding: 0px;
            border-bottom: 2px solid #5aa9df;
            transition: all 300ms ease;
        }

        .my-password .line.active {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="my-password">
            <input :type="type" @focus="flag=true" @blur="flag=v!=''" @input="v=$event.target.value">
            <div class="placeholder" :class="{active:flag}">
                <span class="info">Password</span>
                <span class="iconfont icon-eye1" @click=" type = type=='text'?'password':'text' "></span>
            </div>
                        <div class="line" :class="{ active:flag }"></div>
        </div>
    </div>
    <script type="module">
        import { createApp } from "./assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    flag: false,
                    v:'',
                    type:'password'
                }
            }
        }).mount("#app");
    </script>
</body>

</html>